<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个测试JS与OC交互的Demo</title>



    <!--JS代码-->
    <script>

        //必须添加的代码
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    
        //OC调用JS
        setupWebViewJavascriptBridge(function(bridge) {
             bridge.registerHandler('getData', function(data, responseCallback) {
                //这里的data为OC发送给JS的数据
                document.getElementById('content').innerHTML = data;
            })
         })


        //按钮点击事件
        function getData() {
            //JS调用OC
            window.WebViewJavascriptBridge.callHandler('setData', '点击了按钮的事件');
        }

    </script>


</head>
<body>


    <!--添加一个按钮-->
<input type="button" onclick="getData()" value="点击" style="width: 150px">
<p id="content">这是测试OC调用JS的地方</p>


</body>
</html>
